<template>
	<view>
        <u-field v-if="type === 'pw'" v-model="idNo" disabled label="身份证号" :clearable="false" placeholder="请填写身份证号"></u-field>
        <u-field v-model="phone" disabled label="手机号" :clearable="false" placeholder="请填写手机号"></u-field>
        <u-field v-if="type === 'phone'" v-model="newPhone" label="新手机号" :clearable="false" placeholder="请填写新手机号"></u-field>
        <u-field v-if="type === 'pw'" v-model="userPassword" label="新密码" :clearable="false" password placeholder="请填写密码"></u-field>
        <u-field v-model="verifyCode" label="验证码" :clearable="false" placeholder="请填写验证码">
			<u-button size="mini" slot="right" type="success" @click="getVerifyCode">{{codeText}}</u-button>
		</u-field>
		<button class="btn-signup" @click="modify">确认修改</button>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import Vue from 'vue';
	import md5Libs from "uview-ui/libs/function/md5";
	import { 
		resetPwdAPI,
		modifyPhoneAPI,
		getVerifyAuthCodeAPI,
		sendVerifyByAuthCodeAPI,
	} from '../../api/login'

	const app = getApp()
	export default Vue.extend({
		data() {
			return {
                type: '',
                idNo: '',
                phone: '',
                newPhone: '',
                codeText: '',
                userPassword: '',
                verifyCode: ''
			}
		},
		onLoad(options) {
			this.type = options.type // phone修改手机 pw修改密码
            this.idNo = app.globalData.userIdNo
            this.phone = app.globalData.phoneNumber
		},
		methods: {
            modify(){
                if(this.type === 'phone') {
                    this.modifyPhone()
                } else if(this.type === 'pw'){
                    this.modifyPW()
                }
            },
            modifyPhone(){
                if(this.newPhone.length !== 11) {
	                this.$refs.uToast.show({
				    	title: '请输入正确新手机号',
				    	type: 'error',
                    })
                    return false
                }
                if(!this.verifyCode) {
	                this.$refs.uToast.show({
				    	title: '请输入验证码',
				    	type: 'error',
                    })
                    return false
                }
                modifyPhoneAPI({
                    sessionId: app.globalData.sessionId,
                    phone: this.phone,
                    newPhone: this.newPhone,
                    verifyCode: this.verifyCode,
                }).then(res => {
                    app.globalData.phoneNumber = this.newPhone
                    this.$refs.uToast.show({
					    title: '修改手机号成功',
					    type: 'success',
                        callback:() => {
                            this.$u.route({type: 'navigateBack'})
                        }
                	})
                }).catch(err => {
                    this.$refs.uToast.show({
					    title: err,
					    type: 'error',
                	})
                })
            },
            modifyPW(){
                if(!this.userPassword) {
	                this.$refs.uToast.show({
				    	title: '请输入密码',
				    	type: 'error',
                    })
                    return false
                }
                if(!this.verifyCode) {
	                this.$refs.uToast.show({
				    	title: '请输入验证码',
				    	type: 'error',
                    })
                    return false
                }
                resetPwdAPI({
					idNo: this.idNo, 
					verifyCode: this.verifyCode, 
					userPassword: md5Libs.md5(this.userPassword)
				}).then(res => {
                    this.$refs.uToast.show({
					    title: '修改密码成功',
					    type: 'success',
                        callback:() => {
                            this.$u.route({type: 'navigateBack'})
                        }
                	})
                }).catch(err => {
                    this.$refs.uToast.show({
					    title: err,
					    type: 'error',
                	})
                })
            },
			codeChange(text) {
				this.codeText = text;
			},
			getVerifyCode(){
				if(this.phone.length !== 11) {
	                this.$refs.uToast.show({
				    	title: '请输入正确手机号',
				    	type: 'error',
                    })
                    return false
                }
				if(this.$refs.uCode.canGetCode) {
					getVerifyAuthCodeAPI({phoneNumber: this.phone}).then(res => {
						return sendVerifyByAuthCodeAPI({
                        phoneNumber: this.phone, 
                        authCode: res.authCode
                    })
					}).then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.uToast.show({
					    	title: '验证码已发送',
					    	type: 'success',
                	    })
						this.$refs.uCode.start();
					}).catch(err => {
                	    console.log(err)
                	    this.$refs.uToast.show({
					    	title: err,
					    	type: 'error',
                	    })
                	})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';
.btn-signup{
	background-color: $theme-color;
	color: #fff;
	position: absolute;
	bottom: 100rpx;
	left: 10vw;
	width: 80vw;
	margin: 0 auto;
}
</style>
